<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../../common/tag.jsp"%>
<html>
<head>
<title>dashboard</title>
<%@ include file="../../common/header.jsp"%>
</head>
<body>
	<div class="wrapper wrapper-content" style="background-color:	#F3F3F4;">
		<div class="row">
			<div class="col-lg-3">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<span class="label label-info pull-right">Yesterday</span>
						<h5>未读消息</h5>
					</div>
					<div class="ibox-content">
						<h1 class="no-margins" style="font-weight:bold;">${unReadCount}</h1>
						<small>昨日未读消息</small>
					</div>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<span class="label label-info pull-right">Yesterday</span>
						<h5 >新关注人数</h5>
					</div>
					<div class="ibox-content">
						<c:set var="increasedFans" value="0" />
						<c:forEach items="${increasedAndLostFansList}" var="increasedAndLostFans">
							<c:set value="${increasedAndLostFans.new_user+increasedFans}" var="increasedFans"/>
						</c:forEach>
						<h1 class="no-margins" style="font-weight:bold;">${increasedFans}</h1>
						<small>昨日新增粉丝</small>
					</div>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<span class="label label-info pull-right">Yesterday</span>
						<h5>取消关注人数</h5>
					</div>
					<div class="ibox-content">
						<c:set var="lostFans" value="0" />
						<c:forEach items="${increasedAndLostFansList}" var="increasedAndLostFans">
							<c:set value="${increasedAndLostFans.cancel_user+lostFans}" var="lostFans"/>
						</c:forEach>
						<h1 class="no-margins" style="font-weight:bold;">${lostFans}</h1>
						<small>昨日取消关注粉丝</small>
					</div>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<span class="label label-info pull-right">Yesterday</span>
						<h5>累计关注人数</h5>
					</div>
					<div class="ibox-content">
						<c:set var="accumulativeTotal" value="0" />
						<c:forEach items="${accumulativeTotalFansList}" var="accumulativeTotalFans">
							<c:set value="${accumulativeTotalFans.cumulate_user+accumulativeTotal}" var="accumulativeTotal"/>
						</c:forEach>
						<h1 class="no-margins" style="font-weight:bold;">${accumulativeTotal}</h1>
						<small>昨日总粉丝数</small>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>近七日数据报表</h5>
					</div>
					<div class="jumbotron" style="background-color:white;display:inline-block;width:100%;">
					  <div id="accumulativeTotalFansReport" style="height:360px;"></div>
					  <div id="msgSendSummaryCountReport" style="height:360px;"></div>
					</div>

				</div>
			</div>
		</div>
	</div>
</body>
</html>
<%@ include file="../../common/footer.jsp"%>
<script src="${ctx }/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="${ctx }/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="${ctx }/js/plugins/flot/jquery.flot.js"></script>
<script src="${ctx }/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="${ctx }/js/plugins/flot/jquery.flot.spline.js"></script>
<script src="${ctx }/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="${ctx }/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="${ctx }/js/plugins/flot/jquery.flot.symbol.js"></script>
<script src="${ctx }/js/plugins/flot/jquery.flot.time.js"></script>
<script src="${ctx }/js/echarts.js"></script>

<!-- Peity -->
<script src="${ctx }/js/plugins/peity/jquery.peity.min.js"></script>
<script src="${ctx }/js/demo/peity-demo.js"></script>

<!-- Custom and plugin javascript -->
<script src="${ctx }/js/inspinia.js"></script>
<script src="${ctx }/js/plugins/pace/pace.min.js"></script>

<!-- jQuery UI -->
<script src="${ctx }/js/plugins/jquery-ui/jquery-ui.min.js"></script>

<!-- Jvectormap -->
<script
	src="${ctx }/js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script
	src="${ctx }/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

<!-- EayPIE -->
<script src="${ctx }/js/plugins/easypiechart/jquery.easypiechart.js"></script>

<!-- Sparkline -->
<script src="${ctx }/js/plugins/sparkline/jquery.sparkline.min.js"></script>

<!-- Sparkline demo data  -->
<script src="${ctx }/js/demo/sparkline-demo.js"></script>

<script type="text/javascript">
		var accumulativeTotalFansDate = [];
		var accumulativeTotalFansData = [];
		var msgSendSummaryDate = [];
		var msgSendSummaryData = [];
		<c:forEach items="${accumulativeTotalFansListOne}" var="accumulativeTotalFansOne">
			accumulativeTotalFansDate.push("${accumulativeTotalFansOne.ref_date}")
		</c:forEach>
		<c:forEach items="${accumulativeTotalFansListOne}" var="accumulativeTotalFansOne">
			accumulativeTotalFansData.push(parseInt("${accumulativeTotalFansOne.cumulate_user}"))
		</c:forEach>
			
		<c:forEach items="${msgSendSummaryCountList}" var="msgSendSummaryCount">
			msgSendSummaryDate.push("${msgSendSummaryCount.ref_date}")
		</c:forEach>
		<c:forEach items="${msgSendSummaryCountList}" var="msgSendSummaryCount">
			msgSendSummaryData.push(parseInt("${msgSendSummaryCount.msg_count}"))
		</c:forEach>
			
        // 基于准备好的dom，初始化echarts实例
        var accumulativeTotalFansChart = echarts.init(document.getElementById('accumulativeTotalFansReport'));
        var msgSendSummaryCountChart = echarts.init(document.getElementById('msgSendSummaryCountReport'));

        // 指定图表的配置项和数据
        var accumulativeTotalFansOption = {
        title: {      //标题组件
            text: '近七日总粉丝量',
            textStyle: {  
                fontWeight: 'normal',              //标题颜色  
                color: '#20B2AA'  
            },  
        },
        tooltip: {    //提示框组件
            trigger: 'axis'
        },
        grid: {       //直角坐标系内绘图网格
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {     //工具栏
        	show:true,
        	x:'95%',
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {       //直角坐标系 grid 中的 x 轴
            type: 'category',
            boundaryGap: false,
            data: accumulativeTotalFansDate,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#20B2AA'
                }
            }
        },
        yAxis: {       //直角坐标系 grid 中的 y 轴
            type: 'value',
            	axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#20B2AA'
                    }
                }
        },
        series: [      //系列列表
            {
                name: '总粉丝量',
                type: 'line',
                stack: '总量',
                symbol:'circle',
                symbolSize: 8,
                areaStyle: {normal: {color:'rgba(78, 238, 148, 0.2)'}},
                itemStyle : {normal : {color:'#20B2AA',lineStyle:{width:1,color:'#20B2AA'}}},
                data: accumulativeTotalFansData
            }
        ]
    };
        
     // 指定图表的配置项和数据
        var msgSendSummaryCountOption = {
        title: {      //标题组件
            text: '近七日总消息发送量',
            textStyle: {  
                fontWeight: 'normal',              //标题颜色  
                color: '#20B2AA'  
            },  
        },
        tooltip: {    //提示框组件
            trigger: 'axis'
        },
        grid: {       //直角坐标系内绘图网格
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {     //工具栏
        	show:true,
        	x:'95%',
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {       //直角坐标系 grid 中的 x 轴
            type: 'category',
            boundaryGap: false,
            data: msgSendSummaryDate,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#20B2AA'
                }
            }
        },
        yAxis: {       //直角坐标系 grid 中的 y 轴
            type: 'value',
            	axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#20B2AA'
                    }
                }
        },
        series: [      //系列列表
            {
                name: '总消息发送量',
                type: 'line',
                stack: '总量',
                symbol:'circle',
                symbolSize: 8,
                areaStyle: {normal: {color:'rgba(78, 238, 148, 0.2)'}},
                itemStyle : {normal : {color:'#20B2AA',lineStyle:{width:1,color:'#20B2AA'}}},
                data: msgSendSummaryData
            }
        ]
    };

        // 使用刚指定的配置项和数据显示图表。
        accumulativeTotalFansChart.setOption(accumulativeTotalFansOption);
        msgSendSummaryCountChart.setOption(msgSendSummaryCountOption);
    </script>
